<template>
	<up-popup :show="isSheet">
		<view class="sheet-box">
			<view class="u-flex u-flex-items-center title">
				<view @click.stop="hind">
					<text>关闭</text>
				</view>

				<!-- 对题数 -->
				<view class="u-flex u-flex-items-center u-m-l-auto">
					<up-icon name="checkmark-circle" size="20" color="#4cd964"></up-icon>
					<text class="y-f-s-26 u-m-l-10">1</text>
				</view>

				<!-- 错题数 -->
				<view class="u-flex u-flex-items-center u-m-l-30">
					<up-icon name="close-circle" size="20" color="#dd524d"></up-icon>
					<text class="y-f-s-26 u-m-l-10">1</text>
				</view>

				<!-- 做题进度统计 -->
				<view class="u-flex u-flex-items-center u-m-l-30">
					<up-icon name="grid" size="20"></up-icon>
					<text class="y-f-s-26 u-m-l-10">1</text>
					<text class="y-f-s-26 u-m-l-10">/</text>
					<text class="y-f-s-26 u-m-l-10">1590</text>
				</view>
			</view>
		
		
			<view class="u-flex u-flex-wrap list">
				<view class="item" v-for="item in 100" :key="item">{{item}}</view>
			</view>
		</view>
	</up-popup>
</template>

<script>
	export default {
		name: "ySheet"
	}
</script>
<script setup>
	import {
		ref
	} from "vue";
	let isSheet = ref(false)
	
	// 打开
	const open = (e) => {
		isSheet.value = true
	}
	
	// 关闭
	const hind = (e) => {
		isSheet.value = false
	}
	
	defineExpose({
		open,
	})
</script>

<style lang="scss" scoped>
	.title {
		position: relative;
		width: 100%;
		height: 100rpx;
		padding: 0 20rpx;
	
		.close-box {
			position: absolute;
			right: 30rpx;
		}
	}
	
	.sheet-box{
		.list{
			padding-bottom: 20rpx;
			min-height: 360rpx;
			max-height: 660rpx;
			overflow-y: scroll;
			
			.item{
				margin: 20rpx 0 0 20rpx;
				width: 80rpx;
				height: 80rpx;
				border: 1px solid #ddd;
				border-radius: 40rpx;
				text-align: center;
				line-height: 80rpx;
				
			}
		}
	}
	
</style>